<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>toy</title>
    <!-- bootstrap -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

    <!-- animate.css -->
    <link rel="stylesheet" href="./assets/css/animate.min.css" />

    <!-- 重置样式 -->
    <link rel="stylesheet/less" href="./assets/css/reset.less" />

    <!-- 公共样式 -->
    <link rel="stylesheet/less" href="./assets/css/common.less" />

    <!-- 页面独立的 -->
    <link rel="stylesheet/less" href="./assets/css/index.less" />
</head>
<body>
    <!-- header -->
    <div class="bigbox">
        <div class="search-box">
            <input class="glyphicon glyphicon-search" type="search" placeholder="搜索内容">
            <button>搜索</button>
        </div>
        <ul>
           <a href="index.html"><li>推荐</li></a> 
           <a href="#"><li>童装童鞋</li></a> 
           <a href="#"><li>儿童玩具</li></a>
           <a href="#"><li>图书</li></a> 
           <a href="#"><li>奶粉尿裤</li></a> 
           <a href="#"><li>零食</li></a> 
        </ul>
    </div>

    <!-- lunbo -->
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>
      
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="./assets/images/banner.png" alt="...">
            <div class="carousel-caption">
              ...
            </div>
          </div>
          <div class="item">
            <img src="./assets/images/banner.png" alt="...">
            <div class="carousel-caption">
              ...
            </div>
          </div>
          <div class="item">
            <img src="./assets/images/banner.png" alt="...">
            <div class="carousel-caption">
              ...
            </div>
          </div>
        </div>
      
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
    </div>

    <!-- function -->
    <div class="function">
        <div class="container">
            <div class="box">
                <div class="item">
                    <img class="wow fadeInRight" data-wow-delay="100ms"src="./assets/images/logo-1.png" alt="">
                    <span><a href="#">童装童具</a></span>
                </div>
                <div class="item">
                    <img class="wow fadeInRight" data-wow-delay="200ms" src="./assets/images/logo-2.jpg" alt="">
                    <span><a href="#">辅食</a></span>
                </div>
                <div class="item">
                    <img class="wow fadeInRight" data-wow-delay="300ms"src="./assets/images/logo-3.png" alt="">
                    <span><a href="#">奶粉</a></span>
                </div>
                <div class="item">
                    <img class="wow fadeInRight" data-wow-delay="400ms"src="./assets/images/logo-4.png" alt="">
                    <span><a href="#">纸尿裤</a></span>
                </div>
                <div class="item">
                    <img class="wow fadeInRight" data-wow-delay="500ms" src="./assets/images/logo-5.png" alt="">
                    <span><a href="#">儿童玩具</a></span>
                </div>
            </div>
        </div>
    </div>

    <!-- toybanner -->
    <div class="toybanner">
        <img src="./assets/images/toybanner.png" alt="">
        <div id="box">
            <div id="tabs">
                <div class="nav active">每人限2件</div>
                <div class="nav">限量疯抢</div>
            </div>
        
            <div id="content">
                <div class="block active">玩具一元购</div>
                <div class="block">限量疯抢!!!!</div>
            </div>
        </div>    
    </div>

    <!-- block -->
    <div class="block1">
        <div class="container">
            <div class="left">
                <img src="./assets/images/wan1.png" alt="">
                <div class="content">
                    <h1>儿童用品</h1>
                    <span>限时</span>
                    <a href="#">限时购买，下单返七元</a>
                </div>
            </div>
            <div class="right">
                <div class="one">
                    <img src="./assets/images/xie.jpg" alt="">
                    <div class="content1">
                        <h1>大牌抢购</h1>
                        <p>超舒适儿童鞋</p>
                        <a href="#">NEW ></a>
                    </div>
                </div>
                <div class="one">
                    <img src="./assets/images/xie.jpg" alt="">
                    <div class="content1">
                        <h1>大牌抢购</h1>
                        <p>超舒适儿童鞋</p>
                        <a href="#">NEW ></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- footer -->
    <div class="footer">
        <div class="box1">
            <div class="item1">
                <a href="./index.html"><img src="./assets/images/footer-1.png" alt=""></a>
                <a href="#">首页</a>
            </div>
            <div class="item1">
                <a href="./fenlei.html"><img src="./assets/images/footer-2.png" alt=""></a>
                <a href="#">分类</a>
            </div>
            <div class="item1" >
                <a href="./gouwu.html"><img src="./assets/images/footer-3.png" alt=""></a>
                <a href="#">购物车</a>
            </div>
            <div class="item1">
                <a href="./me.html"><img src="./assets/images/footer-4.png" alt=""></a>
                <a href="#">我的</a>
            </div>
        </div>
    </div>

</body>
</html>
<!-- 解析less的文件 -->
<script src="./assets/js/less.min.js"></script>

<!-- jquery  -->
<script src="./assets/js/jquery.min.js"></script>

<!-- bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- wow.js -->
<script src="./assets/js/wow.min.repeat.js"></script>

<script>
    new WOW().init()
</script>

  <script>
    var tabs = document.getElementById('tabs')
    var box = document.getElementById('box')
    var navlist = document.getElementsByClassName('nav')
    var blocklist = document.getElementsByClassName('block')

    //全局的索引
    var index = 0
    var T

    //给导航元素设置一个自定义的属性，来区分我点击的是哪一个
    for(var i=0;i<navlist.length;i++)
    {
        //给每个元素设置一个自定义属性 data-index
        navlist[i].dataset.index = i
    }

    tabs.onclick = function(e)
    {
        // e == event == 事件对象
        // this 当前触发的对象
        index = e.target.dataset.index

        //初始化
        for(var i=0;i<navlist.length;i++)
        {
            navlist[i].className = 'nav'
            blocklist[i].className = 'block'
        }

        //在给指定的添加选中效果
        navlist[index].className = 'nav active'

        blocklist[index].className = 'block active'
    }



    function autoplay()
    {
        //滚动到最后一张
        if(index >= navlist.length - 1)
        {
            //恢复到第一个
            index = 0
        }else
        {
            //往后滚动
            index++
        }

        //初始化
        for(var i=0;i<navlist.length;i++)
        {
            navlist[i].className = 'nav'
            blocklist[i].className = 'block'
        }

        //在给指定的添加选中效果
        navlist[index].className = 'nav active'

        blocklist[index].className = 'block active'

    }


    T = setInterval(autoplay, 500)


    box.onmouseover = function()
    {
        clearInterval(T)
    }

    box.onmouseout = function()
    {
        T = setInterval(autoplay, 500)
    }



</script> 